@charset "utf-8";

/* css reset:为什么? 为了重置默认样式, 并让各大浏览器的样式统一 */
/* 初始化 */
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 12px/1.5 'Microsoft YaHei', '宋体', Tahoma, Arial, sans-serif;
  color: #555;
  background-color: #f7f7f7;
}

/*去除边框*/
fieldset,
img,
input,
button,
textarea {
  border: none;
  /*去除的蓝色小边框*/
  outline-style: none;
}

/*禁止表单域缩放*/
textarea {
  resize: none;
}

a {
  text-decoration: none;
  color: #969696;
  /* 取消链接高亮(移动端)  */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 图片自适应 */
img {
  // width: 100%;
  /*解决图片底部对其问题*/
  display: block;
}

ul,
ol {
  list-style: none;
}

/* 把所有的标题的样式全部重置了 */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-decoration: none;
  font-weight: normal;
  font-size: 100%;
}

/* 废物利用 */
em,
i {
  font-style: normal;
}

/* 提供了一些公共类 */
.fl {
  float: left;
}

.fr {
  float: right;
}
.pr {
  position: relative;
}

.mt-6 {
  margin-top: 0.12rem /* 6/50 */;
}

/*清除浮动*/
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.hidden {
  display: none;
}

/*单行溢出*/
.one-txt-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*多行溢出*/
.txt-cut {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

header {
  width: 100%;
  height: 1rem;
  // padding-top: 0.1rem;
  background-color: #ff841d;
  .logo {
    width: 75%;
    height: 100%;
    // background-color: red;
    padding: 0.24rem /* 12/50 */;
    margin-left: 0.1rem /* 5/50 */;
    img {
      // width: 50%;
      max-height: 0.5rem /* 25/50 */;
    }
  }
  .app {
    width: 1rem /* 50/50 */;
    height: 1rem;
    padding: 0.16rem /* 8/50 */;
    img {
      width: 0.68rem /* 34/50 */;
      height: 0.68rem /* 34/50 */;
    }
  }
}

footer {
  background-color: #efefef;
  text-align: center;
  width: 100%;
  .foot-t {
    height: 0.68rem /* 34/50 */;
    line-height: 0.68rem /* 34/50 */;
    border: 0.02rem /* 1/50 */ solid #ccc;
    a {
      float: left;
      width: 33.33%;
      color: #000;
      border-right: 0.02rem /* 1/50 */ solid #ccc;
      font-size: 0.28rem /* 14/50 */;
      img {
        vertical-align: middle;
        display: inline-block;
        margin-top: -0.1rem /* 5/50 */;
      }
    }
  }
  .foot-b {
    padding: 0.3rem /* 15/50 */ 0;
  }
}

.search {
  background-color: #fff;
  padding: 0.2rem /* 10/50 */;
  line-height: 0.6rem;
  input[type='text'] {
    height: 0.6rem /* 30/50 */;
    width: 80%;
    background-color: #f1f1f1;
    text-indent: 20px;
    border-radius: 0.6rem;
    font-size: 0.26rem /* 13/50 */;
  }
  button {
    margin-left: 0.1rem /* 5/50 */;
    height: 0.6rem;
    width: 17%;
    border-radius: 0.6rem;
    background-color: #ff841d;
    color: #fff;
    font-size: 0.32rem /* 16/50 */;
    line-height: 0.6rem;
  }
}
//产品页导航
.product-nav {
  width: 100%;
  height: 0.76rem /* 38/50 */;
  line-height: 0.76rem;
  background-color: #ebebeb;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#ebebeb));
  padding-left: 0.16rem /* 8/50 */;
  font-size: 0.28rem /* 14/50 */;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ccc;
  color: #000;
  .choose {
    width: 1.2rem /* 60/50 */;
    height: 0.56rem /* 28/50 */;
    line-height: 0.56rem;
    border: 1px solid #bbb;
    display: block;
    text-align: center;
    color: #000;
    margin-top: 0.06rem /* 5/50 */;
    margin-right: 0.2rem;
    border-radius: 0.16rem /* 8/50 */ 0.16rem 0.08rem /* 4/50 */ 0.08rem;
    background-color: #d0d0d0;
    background: -webkit-gradient(
      linear,
      0 0,
      0 100%,
      from(#d7d7d7),
      to(#f5f5f5)
    );
    box-shadow: 0 1px 2px #888;
  }
  span {
    a {
      color: #000;
    }
  }
}

//主页列表复用
.rec-product {
  margin-bottom: 0.1rem /* 20/50 */;
  background-color: #fff;
  .pro-list {
    li {
      padding: 0.28rem /* 14/50 */ 0.16rem /* 8/50 */;
      border-bottom: 1px solid #e7e7e7;
      a {
        color: #000;
        font-size: 0.28rem /* 14/50 */;
        .pic {
          width: 2rem /* 100/50 */;
          height: 2rem;
          background-color: hotpink;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .info {
          // background-color: #ccc;
          height: 2rem /* 100/50 */;
          padding-left: 2rem /* 108/50 */;
          .title {
            color: #333;
            word-break: break-all;
            font-size: 15px;
            line-height: 19px;
            min-height: 57px;
            text-align: left;
            font-weight: 400;
            padding-left: 0.24rem /* 12/50 */;
            span {
              color: #ff6c00;
            }
          }
          .other {
            padding-left: 0.24rem;
            color: #a1a1a1;
            font-size: 0.24rem; /* 12/50 */
          }
        }
      }
    }
  }
  .more-bar {
    width: 100%;
    text-align: center;
    a {
      line-height: 0.6rem /* 30/50 */;
      background-color: hotpink;
      display: block;
      border: 0.02rem /* 1/50 */ solid #ddd;
      border-radius: 0.08rem /* 4/50 */;
      margin: 0.2rem /* 10/50 */;
      background-image: linear-gradient(#fff, #f4f4f4);
    }
  }
}

//分页器
.pagination {
  margin-top: 0.2rem /* 20/50 */;
  text-align: center;
  padding: 0 0.4rem /* 20/50 */ 0.6rem /* 30/50 */;
  a {
    height: 0.72rem /* 36/50 */;
    box-sizing: border-box;
    background-color: #d4d4d4;
    background: -webkit-gradient(
      linear,
      0 0,
      0 100%,
      from(#f1f1f1),
      to(#d4d4d4)
    );
    border-bottom: 1px solid #bababa;
    border-radius: 0.1rem /* 5/50 */;
    padding: 8px 20px;
    color: #000;
  }
}

.countheader {
  text-align: center;
  .logo {
    a {
      color: #fff;
      font-size: 0.4rem /* 20/50 */;
      font-weight: 700;
      margin-left: 1.68rem /* 84/50 */;
    }
  }
}
